import app from './../app.js';
import config from './../config.js';
import Base_tools_class from './../core/base-tools.js';
import Base_layers_class from './../core/base-layers.js';
import Helper_class from '../libs/helpers.js';
import {getBackgroundColorByCanvas} from './../utils.js';
import { message } from 'antd';

class Erase_class extends Base_tools_class {

	constructor(ctx) {
		super();
		this.Base_layers = new Base_layers_class();
		this.Helper = new Helper_class();
		this.ctx = ctx;
		this.name = 'erase';
		this.tmpCanvas = null;
		this.tmpCanvasCtx = null;
		this.started = false;
		this.stroke_color_r = '255'
		this.stroke_color_g = '255'
		this.stroke_color_b = '255'
	}

	load() {
		this.default_events();

		document.addEventListener('mousewheel', (e) => {
			if (config.TOOL.name != this.name) return;
			this.updateMouseCursor(e)
		});
	}

	on_activate(){
		//获取图片背景色
		var bgColor = getBackgroundColorByCanvas(this.ctx);
		
		var bgColorRgb = bgColor.split(', ')
		this.stroke_color_r = bgColorRgb[0]
		this.stroke_color_g = bgColorRgb[1]
		this.stroke_color_b = bgColorRgb[2]

		this.setRasterMouseCursor('none')
	}

	on_leave(){
		this.hide_mouse_cursor()
		this.setRasterMouseCursor('')
	}

	default_dragMove(event, is_touch) {
		if (config.TOOL.name != this.name) return;
		this.mousemove(event, is_touch);
		this.updateMouseCursor(event)
	}

	updateMouseCursor(e){
		var mouse = this.get_mouse_info(e);
		
		var params = this.getParams();
		if (params.circle) this.show_mouse_cursor(mouse.x_real_raster, mouse.y_real_raster, params.size, 'circle');
		else this.show_mouse_cursor(mouse.x_real_raster, mouse.y_real_raster, params.size, 'rect');
	}

	on_params_update() {
		// var params = this.getParams();
		// var strict_element = document.querySelector('.attributes #strict');

		// if (params.circle == false) {
		// 	//hide strict controls
		// 	strict_element.style.display = 'none';
		// }
		// else {
		// 	//show strict controls
		// 	strict_element.style.display = 'block';
		// }
	}

	mousedown(e) {
		this.started = false;
		var mouse = this.get_mouse_info(e);
		var params = this.getParams();
		if (mouse.click_valid == false) {
			return;
		}

		this.Helper.selectNearbyImageLayer()

		if (config.layer.type != 'image') {
			message.warning('非图片类型暂不支持');
			return;
		}

		// if (config.layer.is_vector == true) {
		// 	message.warning('Layer is vector, convert it to raster to apply this tool.');
		// 	return;
		// }
		// if (config.layer.rotate || 0 > 0) {
		// 	message.warning('无法在旋转的对象上擦除，请转换为栅格后尝试');
		// 	return;
		// }


		this.started = true;
 
		//get canvas from layer
		this.tmpCanvas = document.createElement('canvas');
		this.tmpCanvasCtx = this.tmpCanvas.getContext("2d");
		this.tmpCanvas.width = config.layer.width_original;
		this.tmpCanvas.height = config.layer.height_original;
		this.tmpCanvasCtx.drawImage(config.layer.link, 0, 0);

		this.tmpCanvasCtx.scale(
			config.layer.width_original / config.layer.width,
			config.layer.height_original / config.layer.height
		);

		//do erase
		this.erase_general(this.tmpCanvasCtx, 'click', mouse, params.size, params.strict, params.circle);

		//register tmp canvas for faster redraw
		config.layer.link_canvas = this.tmpCanvas;
		config.need_render = true;
	}

	mousemove(e, is_touch) {
		var mouse = this.get_mouse_info(e);
		var params = this.getParams();
		if (mouse.is_drag == false)
			return;
		if (mouse.click_valid == false) {
			return;
		}
		if (this.started == false) {
			return;
		}
		if (mouse.click_x == mouse.x && mouse.click_y == mouse.y) {
			//same coordinates
			return;
		}

		//do erase
		this.erase_general(this.tmpCanvasCtx, 'move', mouse, params.size, params.strict, params.circle, is_touch);

		//draw draft preview
		config.need_render = true;
	}

	mouseup(e) {
		if (this.started == false) {
			return;
		}
		delete config.layer.link_canvas;

		app.State.do_action(
			new app.Actions.Bundle_action('erase_tool', 'Erase Tool', [
				new app.Actions.Update_layer_image_action(this.tmpCanvas)
			])
		);

		//decrease memory
		this.tmpCanvas.width = 1;
		this.tmpCanvas.height = 1;
		this.tmpCanvas = null;
		this.tmpCanvasCtx = null;
	}
	// 当前代码使用了 destination-out 模式，这是擦除功能的关键。这种模式会将绘制的部分从画布中移除，留下透明区域。source-over模式是填空需要的颜色
	erase_general(ctx, type, mouse, size, strict, is_circle, is_touch) {
		//获取背景色 rgb
		var stroke_c_r = this.stroke_color_r
		var stroke_c_g = this.stroke_color_g
		var stroke_c_b = this.stroke_color_b
		
		var mouse_x = Math.round(mouse.x) - config.layer.x;
		var mouse_y = Math.round(mouse.y) - config.layer.y;
		var alpha = config.ALPHA;
		var mouse_last_x = parseInt(mouse.last_x) - config.layer.x;
		var mouse_last_y = parseInt(mouse.last_y) - config.layer.y;
		ctx.beginPath();
		ctx.lineWidth = size;
		ctx.lineCap = 'round';
		ctx.lineJoin = 'round';
		if (alpha < 255)
			ctx.strokeStyle = `rgba(${stroke_c_r}, ${stroke_c_g}, ${stroke_c_b}, ` + alpha / 255 / 10 + ")";
		else
			ctx.strokeStyle = `rgba(${stroke_c_r}, ${stroke_c_g}, ${stroke_c_b}, 1)`;

		if (is_circle == false) {
			//rectangle
			var size_half = Math.ceil(size / 2);
			if (size == 1) {
				//single cell mode
				mouse_x = Math.floor(mouse.x) - config.layer.x;
				mouse_y = Math.floor(mouse.y) - config.layer.y;
				size_half = 0;
			}
			ctx.save();
			ctx.globalCompositeOperation = 'source-over';
			ctx.fillStyle = `rgba(${stroke_c_r}, ${stroke_c_g}, ${stroke_c_b}, ` + alpha / 255 + ")";
			ctx.fillRect(mouse_x - size_half, mouse_y - size_half, size, size);
			ctx.restore();
		}
		else {
			//circle
			ctx.save();

			//set Composite
			ctx.globalCompositeOperation = 'source-over';
			ctx.fillStyle = `rgba(${stroke_c_r}, ${stroke_c_g}, ${stroke_c_b}, ` + alpha / 255 + ")";
			ctx.beginPath();
			ctx.arc(mouse_x, mouse_y, size / 2, 0, Math.PI * 2, true);
			ctx.fill();
			ctx.restore();
		}

		//extra work if mouse moving fast - fill gaps
		if (type == 'move' && is_circle == true && mouse_last_x != false && mouse_last_y != false && is_touch !== true) {
			ctx.save();
			ctx.globalCompositeOperation = 'source-over';

			ctx.beginPath();
			ctx.moveTo(mouse_last_x, mouse_last_y);
			ctx.lineTo(mouse_x, mouse_y);
			ctx.stroke();

			ctx.restore();
		}
	}

}
export default Erase_class;
